{% extends "admin/base.html" %}

{% block title %}系统设置{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8 max-w-7xl">
    <div class="text-center mb-10">
        <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-neutral-dark">系统设置</h1>
        <p class="text-secondary mt-2">查看系统配置与状态信息</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- 安全设置卡片 -->
        <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all hover:shadow-xl">
            <div class="flex items-center gap-3 mb-6">
                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                    <i class="fa fa-shield text-primary text-xl"></i>
                </div>
                <h2 class="text-xl font-bold text-neutral-dark">安全设置</h2>
            </div>

            <div class="space-y-4">
                <div class="flex items-center justify-between p-4 border border-gray-100 rounded-lg hover:bg-gray-50 transition-colors">
                    <div class="flex items-center gap-3">
                        <i class="fa fa-clock text-primary"></i>
                        <span>会话超时</span>
                    </div>
                    <span class="px-3 py-1.5 bg-gray-100 rounded-lg text-neutral-dark">30分钟</span>
                </div>

                <div class="flex items-center justify-between p-4 border border-gray-100 rounded-lg hover:bg-gray-50 transition-colors">
                    <div class="flex items-center gap-3">
                        <i class="fa fa-lock text-primary"></i>
                        <span>两步验证</span>
                    </div>
                    <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">已启用</span>
                </div>

                <div class="flex items-center justify-between p-4 border border-gray-100 rounded-lg hover:bg-gray-50 transition-colors">
                    <div class="flex items-center gap-3">
                        <i class="fa fa-ban text-primary"></i>
                        <span>登录失败锁定</span>
                    </div>
                    <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">已启用</span>
                </div>

                <div class="flex items-center justify-between p-4 border border-gray-100 rounded-lg hover:bg-gray-50 transition-colors">
                    <div class="flex items-center gap-3">
                        <i class="fa fa-database text-primary"></i>
                        <span>自动备份</span>
                    </div>
                    <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">已启用</span>
                </div>

                <div class="flex items-center justify-between p-4 border border-gray-100 rounded-lg hover:bg-gray-50 transition-colors">
                    <div class="flex items-center gap-3">
                        <i class="fa fa-calendar text-primary"></i>
                        <span>备份频率</span>
                    </div>
                    <span class="px-3 py-1.5 bg-gray-100 rounded-lg text-neutral-dark">每周</span>
                </div>
            </div>
        </div>

        <!-- 通知设置卡片 -->
        <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all hover:shadow-xl">
            <div class="flex items-center gap-3 mb-6">
                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                    <i class="fa fa-bell text-primary text-xl"></i>
                </div>
                <h2 class="text-xl font-bold text-neutral-dark">通知设置</h2>
            </div>

            <div class="space-y-4">
                <div class="flex items-center justify-between p-4 border border-gray-100 rounded-lg hover:bg-gray-50 transition-colors">
                    <div class="flex items-center gap-3">
                        <i class="fa fa-user-plus text-primary"></i>
                        <span>新用户注册</span>
                    </div>
                    <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">已启用</span>
                </div>

                <div class="flex items-center justify-between p-4 border border-gray-100 rounded-lg hover:bg-gray-50 transition-colors">
                    <div class="flex items-center gap-3">
                        <i class="fa fa-exclamation-triangle text-primary"></i>
                        <span>系统异常</span>
                    </div>
                    <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">已启用</span>
                </div>

                <div class="flex items-center justify-between p-4 border border-gray-100 rounded-lg hover:bg-gray-50 transition-colors">
                    <div class="flex items-center gap-3">
                        <i class="fa fa-refresh text-primary"></i>
                        <span>系统更新</span>
                    </div>
                    <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">已启用</span>
                </div>

                <div class="flex items-center justify-between p-4 border border-gray-100 rounded-lg hover:bg-gray-50 transition-colors">
                    <div class="flex items-center gap-3">
                        <i class="fa fa-envelope text-primary"></i>
                        <span>邮件通知</span>
                    </div>
                    <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">已启用</span>
                </div>

                <div class="flex items-center justify-between p-4 border border-gray-100 rounded-lg hover:bg-gray-50 transition-colors">
                    <div class="flex items-center gap-3">
                        <i class="fa fa-mobile text-primary"></i>
                        <span>短信通知</span>
                    </div>
                    <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">已禁用</span>
                </div>
            </div>
        </div>

        <!-- 系统信息卡片 -->
        <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all hover:shadow-xl">
            <div class="flex items-center gap-3 mb-6">
                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                    <i class="fa fa-info-circle text-primary text-xl"></i>
                </div>
                <h2 class="text-xl font-bold text-neutral-dark">系统信息</h2>
            </div>

            <div class="space-y-4">
                <div class="grid grid-cols-3 gap-2 items-center p-4 border border-gray-100 rounded-lg">
                    <div class="text-secondary">版本</div>
                    <div class="col-span-2 font-medium">v2.5.0</div>
                </div>

                <div class="grid grid-cols-3 gap-2 items-center p-4 border border-gray-100 rounded-lg">
                    <div class="text-secondary">更新时间</div>
                    <div class="col-span-2 font-medium">2025-05-10</div>
                </div>

                <div class="grid grid-cols-3 gap-2 items-center p-4 border border-gray-100 rounded-lg">
                    <div class="text-secondary">数据库</div>
                    <div class="col-span-2 font-medium">v1.3.0</div>
                </div>

                <div class="grid grid-cols-3 gap-2 items-center p-4 border border-gray-100 rounded-lg">
                    <div class="text-secondary">环境</div>
                    <div class="col-span-2 font-medium">Linux / Nginx / Python 3.9</div>
                </div>

                <div class="p-4 border border-gray-100 rounded-lg">
                    <div class="text-secondary mb-2">版权信息</div>
                    <p class="font-medium">© 2025 班级管理系统 - 保留所有权利</p>
                </div>

                <div class="p-4 border border-gray-100 rounded-lg">
                    <div class="text-secondary mb-2">系统简介</div>
                    <p class="text-sm text-neutral-dark">
                        班级管理系统是一款专为学校设计的全方位管理平台，提供学生、教师、课程和成绩的综合管理功能。系统采用现代化界面设计，支持多角色权限管理，数据安全可靠，操作简单便捷。
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- 系统状态卡片 -->
    <div class="mt-8 bg-white rounded-xl shadow-lg p-6">
        <div class="flex items-center gap-3 mb-6">
            <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                <i class="fa fa-server text-primary text-xl"></i>
            </div>
            <h2 class="text-xl font-bold text-neutral-dark">系统状态</h2>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div class="bg-gray-50 rounded-lg p-4">
                <div class="text-secondary text-sm mb-1">在线用户</div>
                <div class="text-2xl font-bold text-neutral-dark">128</div>
                <div class="text-xs text-green-500 mt-1">较昨日 +12</div>
            </div>

            <div class="bg-gray-50 rounded-lg p-4">
                <div class="text-secondary text-sm mb-1">今日登录</div>
                <div class="text-2xl font-bold text-neutral-dark">456</div>
                <div class="text-xs text-green-500 mt-1">较昨日 +37</div>
            </div>

            <div class="bg-gray-50 rounded-lg p-4">
                <div class="text-secondary text-sm mb-1">服务器负载</div>
                <div class="text-2xl font-bold text-neutral-dark">24%</div>
                <div class="text-xs text-green-500 mt-1">正常范围</div>
            </div>

            <div class="bg-gray-50 rounded-lg p-4">
                <div class="text-secondary text-sm mb-1">上次备份</div>
                <div class="text-2xl font-bold text-neutral-dark">今天 02:30</div>
                <div class="text-xs text-green-500 mt-1">备份成功</div>
            </div>
        </div>
    </div>
</div>
{% endblock %}